<template>
  <div>
<!--    <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" v-loading="loading" max-height= :data="items" border stripe style="width: 100%">-->
<!--      <el-table-column label="出厂编号"  min-width="200">-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.name }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="地址" min-width="200">-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.province_name }} {{ scope.row.city_name }}-->
<!--          {{ scope.row.county_name }}{{scope.row.install_address}}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="product_number" min-width="200" label="产品编号" />-->
<!--      <el-table-column prop="create_time_format" min-width="190" label="创建时间" />-->
<!--      <el-table-column label="操作" min-width="150" fixed="right">-->
<!--        <template slot-scope="scope">-->
<!--            <el-button type="primary" plain size="mini"  class="px-1" @click="openEdit(scope.row)" v-if="permission.includes('sys:product:edit')">编辑</el-button>-->
<!--            <el-button size="mini" @click="removeProduct(scope.row.id)" v-if="permission.includes('sys:product:delete')">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

    <ele-pro-table  :toolbar="false" ref="table" :columns="columns" :datasource="url"  height="calc(90vh - 315px)">
      <template slot="index" slot-scope="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
      <!-- 操作列 -->
      <template slot="action" slot-scope="{row}">
                    <el-button type="primary" plain size="mini"  class="px-1" @click="openEdit(row)" v-if="permission.includes('sys:product:edit')">编辑</el-button>
                    <el-button size="mini" @click="removeProduct(row.id)" v-if="permission.includes('sys:product:delete')">删除</el-button>
      </template>
    </ele-pro-table>
    <ProductForm ref="productFormRef" @reload="loadData"/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import ProductForm from "@/views/product/product/compenents/product-form.vue";
export default {
  name: "Product",
  components:{
    ProductForm
  },
  props: {
    customerInfo:{
      type:Object,
    },
    id: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(["permission"])
  },

  data() {
    return {
      // 表格数据接口
      url: `customers/${this.id}/products`,
      // 表格列配置
      columns: [
        {
          slot: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          fixed: "left",
          emptyText: '暂无',

        },
        {
          prop: 'name',
          label: '出厂编号',
          width: 200,
          align: 'center',
          showOverflowTooltip: true,
          emptyText: '暂无',
        },
        {
          prop: 'type.name',
          label: '设备型号',
          showOverflowTooltip: true,
          minWidth: 200,
          emptyText: '暂无',
          align: 'center',
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          emptyText: '暂无',
          fixed: "right"
        },],
      loading: false,
      items: []
    };
  },

  mounted() {
    this.loadData();
  },

  methods: {
    openEdit(row) {
      const newRow = Object.assign({},row,{
        customer:{
          name:this.customerInfo.name
        }
      })
      this.$refs.productFormRef.showDialog(row ? "edit" : "add", newRow,true);
      this.$forceUpdate()
    },

    loadData() {
      this.loading = true;
      this.$http.get(`customers/${this.id}/products`).then((res) => {
        this.items = res.data.data;
        this.loading = false;
      });
    },

    removeProduct(id) {
      this.$confirm("确定删除该产品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.delete(`products/${id}`).then((res) => {
          this.$message.success(res.data.msg);
          this.loadData();
        });
      });
    }
  }
};
</script>
